<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
    1. 标签的属性 
    accept: 控制能够选择哪种类型的文件，比如 .jpg,.png,.gif  在比如 image/*
    multiple: 控制能够多选文件
  -->

  <input type="file" accept="image/*" multiple>
  <br />
  <img src="" alt="">


  <script>
    // 2. 在JS中，如何使用文件域（用代码如何获取文件）
    // 在JS中，如果要表示一个文件的话，可以使用文件对象。
    // 在JS中，使用一个对象来表示文件。（一个文件对象 ===== 一个文件）

    document.querySelector('input').onchange = function () {
      // 得到文件对象
      // console.dir(this); // console.dir() 可以看到DOM对象的结构

      if (this.files.length > 0) {
        // 说明我们选择了图片
        // 然后在找文件对象。（找第一个文件对象）
        let fileObj = this.files[0];

        // 2.1）文件对象的作用一：上传到服务器（需要把文件对象加到FormData中）
        // let fd = new FormData();
        // fd.append('avatar', fileObj); // 把文件对象追加到FD中
        // fd.append('age', 20);
        // // ajax提交FormData
        // let xhr = new XMLHttpRequest();
        // xhr.onload = function () {
        //   console.log(JSON.parse(xhr.responseText));
        // }
        // xhr.open('POST', 'http://www.itcbc.com:3006/api/formdata');
        // xhr.send(fd);

        // 2.2）做本地预览 （需要将文件对象转成URL地址）
        let url = URL.createObjectURL(fileObj); // URL是一个内置对象，在MDN上可以查到
        // console.log(url);
        document.querySelector('img').src = url;
      }
    }


  </script>
</body>

</html>